<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="info" :model="info" label-width="100px" label-position="top">
        <el-form-item label="姓名">
          <el-input v-model="info.name" disabled/>
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="info.noId" disabled/>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="clazzName" disabled placeholder="请选择" style="width: 100%">
            <el-option
              :key="clazzName"
              :label="clazzName"
              :value="clazzName"/>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="info.gender">
            <el-radio label="0">女</el-radio>
            <el-radio label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :rules="[
            { required: false },
            { validator: mobileRule, message: '请输入正确的11位手机号', trigger: 'blur' }
          ]"
          prop="mobile"
          label="手机号"
        >
          <el-input v-model="info.mobile"/>
        </el-form-item>
        <el-form-item
          :rules="[
            { required: false },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
          ]"
          prop="email"
          label="邮箱"
        >
          <el-input v-model="info.email"/>
        </el-form-item>
        <el-form-item label="住址">
          <el-input v-model="info.address"/>
        </el-form-item>
        <el-row style="margin-bottom: 10px">
          <el-col :span="24">
            <el-button type="primary" style="width: 100%" @click="submitUpdate">保存修改</el-button>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 10px">
          <el-col :span="24">
            <el-button type="success" style="width: 100%" @click="resetPasswodFlag = true">修改密码</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <div class="my-container">
      <el-dialog :close-on-click-modal="false" :visible.sync="resetPasswodFlag" :width="isMobile ? '80%' : '50%'"
                 title="修改密码">
        <el-form
          ref="passwordRequest"
          :model="passwordRequest"
          :label-position="isMobile ? 'top' : 'right'"
          :label-width="isMobile ? '' : '100px'">
          <el-form-item
            :rules="[
              { required: true, message: '请输入当前密码', trigger: 'blur' }
            ]"
            prop="oldPassword"
            label="当前密码">
            <el-input :type="pwdType1" v-model="passwordRequest.oldPassword" placeholder="请输入当前密码"/>
            <span class="show-pwd" @click="showPwd1">
              <svg-icon icon-class="eye"/>
            </span>
          </el-form-item>
          <el-form-item
            :rules="[
              { required: true, message: '新密码不能为空', trigger: 'blur' },
              { validator: passwordRule, trigger: 'blur' }
            ]"
            prop="newPassword"
            label="新密码"
          >
            <el-input :type="pwdType2" v-model="passwordRequest.newPassword" placeholder="密码由8-16位数字、字母或符号组成"/>
            <span class="show-pwd" @click="showPwd2">
              <svg-icon icon-class="eye"/>
            </span>
          </el-form-item>
          <el-form-item
            :rules="[
              { required: true, message: '确认密码不能为空', trigger: 'blur' },
              { validator: rePasswordRule, trigger: 'blur' }
            ]"
            prop="rePassword"
            label="确认密码"
          >
            <el-input :type="pwdType3" v-model="passwordRequest.rePassword" placeholder="两次密码需保持一致"/>
            <span class="show-pwd" @click="showPwd3">
              <svg-icon icon-class="eye"/>
            </span>
          </el-form-item>
          <el-form-item label="密码强度">
            <password-strength v-model="passwordRequest.newPassword" style="padding-top: 10px;"/>
          </el-form-item>
        </el-form>
        <el-divider/>
        <p style="font-size: small">如忘记密码，请联系管理员重置</p>
        <div slot="footer" class="dialog-footer">
          <el-button type="success" @click="submitReset">确认修改</el-button>
          <el-button type="info" @click="resetPasswodFlag = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import infoApi from '@/api/student/info'
import PasswordStrength from '@/components/info/PasswordStrength'

export default {
  components: { PasswordStrength },
  data() {
    return {
      isMobile: false,
      clazzName: '',
      info: {
        id: '',
        name: '',
        noId: '',
        clazz: '',
        clazzId: '',
        gender: '',
        mobile: '',
        email: '',
        address: ''
      },
      resetPasswodFlag: false,
      passwordRequest: {
        oldPassword: '',
        newPassword: '',
        rePassword: ''
      },
      pwdType1: 'password',
      pwdType2: 'password',
      pwdType3: 'password'
    }
  },
  created() {
    this.isMobile = document.body.clientWidth <= 576
    this.getCurrentUser()
  },
  methods: {
    getCurrentUser() {
      infoApi.getCurrentStudent().then(res => {
        this.getClazzName(res.result)
      }).catch(error => {
        console.log(error)
      })
    },
    getClazzName(data) {
      this.info = data
      infoApi.getClazzNameById(data.clazz).then(res => {
        this.clazzName = res.result
      }).catch(error => {
        console.log(error)
      })
      this.info.clazzId = data.clazz
    },
    mobileRule(rule, value, callback) {
      if (value !== null && value.length !== 0 && !/^1(3|4|5|6|7|8)\d{9}$/.test(value)) {
        return callback(new Error('请输入正确的11位手机号'))
      }
      return callback()
    },
    submitUpdate() {
      this.$refs['info'].validate((valid) => {
        if (valid) {
          infoApi.updateCurrentStudent(this.info).then(res => {
            this.info = res.result
            this.info.clazzId = res.result.clazz
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }).catch(error => {
            console.log(error)
          })
        } else {
          this.$message({
            message: '请按规则完善信息',
            type: 'warning'
          })
          return false
        }
      })
    },
    passwordRule(rule, value, callback) {
      if (value.length < 6) {
        return callback(new Error('密码长度不能小于6位'))
      }
      if (value.length > 16) {
        return callback(new Error('密码长度不能大于16位'))
      }
      if (/([\u4E00-\u9FA5])+/.test(value)) {
        return callback(new Error('密码不能包含汉字'))
      }
      let mode = 0
      if (/\d/.test(value)) { // 数字
        mode++
      }
      if (/[a-z]/.test(value)) { // 小写
        mode++
      }
      if (/[A-Z]/.test(value)) { // 大写
        mode++
      }
      if (/\W/.test(value)) { // 特殊字符
        mode++
      }
      if (mode < 2) {
        return callback(new Error('密码至少需包含两种以上字符'))
      }
      return callback()
    },
    rePasswordRule(rule, value, callback) {
      console.log(this.passwordRequest.newPassword)
      if (value !== this.passwordRequest.newPassword) {
        return callback(new Error('两次密码输入不一致'))
      }
      return callback()
    },
    submitReset() {
      this.$refs['passwordRequest'].validate((valid) => {
        if (valid) {
          infoApi.restCurrentStudentPassword(this.passwordRequest).then(res => {
            this.$message({
              message: '重置密码成功，请重新登录',
              type: 'success'
            })
            this.$store.dispatch('LogOut').then(() => {
              location.reload() // 为了重新实例化vue-router对象 避免bug
            })
          }).catch(error => {
            console.log(error)
          })
        } else {
          this.$message({
            message: '请按规则完善信息',
            type: 'warning'
          })
          return false
        }
      })
    },
    showPwd1() {
      if (this.pwdType1 === 'password') {
        this.pwdType1 = ''
      } else {
        this.pwdType1 = 'password'
      }
    },
    showPwd2() {
      if (this.pwdType2 === 'password') {
        this.pwdType2 = ''
      } else {
        this.pwdType2 = 'password'
      }
    },
    showPwd3() {
      if (this.pwdType3 === 'password') {
        this.pwdType3 = ''
      } else {
        this.pwdType3 = 'password'
      }
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
.v-modal {
  background-color: white;
}

.my-container {

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
  }

}

</style>
